<template>
  <div class="calculus-box" ref="dom">
    <img :src="require('../assets/background.png')" alt="" />

    <div class="elevation-top">
      滩顶
      <span> {{ data.elevation }}(m) </span>
    </div>

    <div class="safeHeight-big">
      最小安全超高
      <span>{{ data.safeHeight }}(m)</span>
    </div>

    <div class="beachLength-big">
      最小干滩长度
      <span>{{ data.beachLength }}(m)</span>
    </div>

    <div class="capacity-big">
      调洪库容
      <span>{{ data.capacity }}(万m³)</span>
    </div>

    <div class="waterMark-big">
      最高洪水位
      <span>{{ data.waterMark }}(m)</span>
    </div>

    <div class="normalWaterLevel-big">
      正常运行水位
      <span>{{ data.normalWaterLevel }}(m)</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Calculus",
    props: {
      data: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    mounted() {
      this.handlerResize = debounce(this.handlerResize, 300);
      window.addEventListener("resize", this.handlerResize);
      this.handlerResize();
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.handlerResize);
    },
    methods: {
      handlerResize() {
        console.log(this.$refs.dom.clientWidth);
        this.$refs.dom.style = `font-size:${this.$refs.dom.clientWidth / 170}px;`;
      },
    },
  };
  function debounce(fn, delay) {
    let timerId;
    return function(...args) {
      if (timerId) {
        clearTimeout(timerId);
      }
      timerId = setTimeout(() => {
        fn(...args);
        timerId = null;
      }, delay);
    };
  }
</script>

<style scoped>
  .calculus-box {
    position: relative;
    width: 80%;
    text-align: center;
    font-size: 8px;
    margin: 0 auto;
  }
  .calculus-box div {
    font-size: 2.6em;
  }
  .calculus-box span {
    font-size: 1.3em;
    color: #111;
  }

  .calculus-box img {
    display: inline-block;
    width: 100%;
    z-index: 0;
  }

  /* 滩顶 */
  .calculus-box .elevation-top {
    position: absolute;
    top: 19.2%;
    right: 73%;
  }

  /* 最小安全超高 */
  .calculus-box .safeHeight-big {
    position: absolute;
    top: 36.4%;
    right: 76.5%;
  }

  /* 最小干滩长度 */
  .calculus-box .beachLength-big {
    position: absolute;
    top: 5.8%;
    left: 32%;
    width: 11%;
  }

  /* 调洪库容 */
  .calculus-box .capacity-big {
    position: absolute;
    top: 28.5%;
    right: 31.8%;
  }

  /* 最高洪水位 */
  .calculus-box .waterMark-big {
    position: absolute;
    top: 33%;
    right: 6%;
  }

  /* 正常运行水位 */
  .calculus-box .normalWaterLevel-big {
    position: absolute;
    top: 45%;
    left: 89%;
    width: 11%;
    height: 52px;
  }
</style>
